
<template>
	<div class="book">
		<div style="border-bottom: 1px dashed #dddddd;">
			<div class="custom-style">
				<span class="font14">学段：</span>
				<el-checkbox-group  @change="changeStage" class="font14" v-model="queryParams.stages">
					<el-checkbox-button v-for="item in options" :label="item.value" :value="item.key" />
				</el-checkbox-group>
				<div style="clear: both"></div>
			</div>

			<div class="custom-style">
				<span class="font14">年级：</span>
				<el-checkbox-group @change="queryBookList" class="font14" v-model="queryParams.grades">
					<el-checkbox-button v-for="item in gradeOptions" :label="item.value" :value="item.key" />
				</el-checkbox-group>
				<div style="clear: both"></div>
			</div>

			<div class="custom-style">
				<span class="font14">学科：</span>
				<el-checkbox-group @change="queryBookList" class="font14" v-model="queryParams.series">
					<el-checkbox-button v-for="item in seriesOptions" :label="item.subject" :value="item.subject" />
				</el-checkbox-group>
				<div style="clear: both"></div>
			</div>

			<div class="custom-style">
				<span class="font14">版本：</span>
				<el-select style="width: 500px;float: left" multiple v-model="queryParams.seriesNos">
					<el-option v-for="item in versionOptions" :label="item.value" :value="item.key"></el-option>
				</el-select>
				<div style="clear: both"></div>
			</div>

			<div class="custom-style">
				<span class="font14">册次：</span>
				<el-checkbox-group @change="queryBookList" class="font14" v-model="queryParams.semesters">
					<el-checkbox-button v-for="item in volumeOptions" :label="item.value" :value="item.key" />
				</el-checkbox-group>
				<div style="clear: both"></div>
			</div>
		</div>

		<div class="book-content" v-for="item in bookList">
			<aside class="sidebar">
				<div class="book-info" @click="bookDetail(item)">
					<!-- 替换为实际教材封面图 -->
					<img :src="item.coverUrlShow" />
					<div class="book-text">
						<h3>数学</h3>
						<p>{{item.name}}</p>
					</div>
				</div>
				<div class="chapter-list">
					<tree
						:data="item.chapterTrees"
						:bookNo="item.bookNo"
						tab="textbook"
						:maxLevel="3"
						:btn="false"
						ref="treeRef"
					></tree>
				</div>
			</aside>
		</div>

		<div style="clear: both"></div>
	</div>
</template>
<script lang="ts" setup>
import tree from '../../../plugins/tree/index.vue';
import { onMounted, reactive, ref, watch } from 'vue';
import {
	getBookChapterTreeByBookNo, getComboboxByStageId,
	getSemesterCombobox,
	getSeriesComboboxByStage,
	getSeriesTree,
	getStageCombobox,
	searchBook
} from '/@/api/home';
import { useCool } from '/@/cool/hooks';

let options = ref([]);

let queryParams = reactive({
	"grades": [],
	"pageNum": 1,
	"pageSize": 10,
	"total": 0,
	"semesters": [],
	"seriesNos": [],
	"stages": [],
	"series": []
});

const { router } = useCool();
let bookList = ref([]);
//let chapters = ref([]);
let gradeOptions = ref([]);//年级
let volumeOptions = ref([]);//册次
let versionOptions = ref([]);//版本
let seriesOptions = ref([]);//学科
const emit = defineEmits(['show-chapters']);


const bookDetail = async (item) => {
	await router.push({
		path: '/textbook/detail',
		query: Object.assign({}, item, { type: 'edit' })
	})
}
const queryBookList = async () => {
	let res = await searchBook(queryParams);
	bookList.value = res.data.list;
	queryParams.total = res.data.total;

	for (const item of bookList.value) {
		let res = await getBookChapterTreeByBookNo(item.bookNo);
		item.chapterTrees = res.data;
	}
}
const changeStage = async () => {
	queryParams.grades = [];
	queryParams.seriesNos = [];
	queryParams.semesters = [];
	await queryBookList()
}
// 提取初始化函数 - 只初始化阶段数据
const initData = async () => {
	let res = await getStageCombobox();
	options.value = res.data;
	if (options.value.length > 0) {
		queryParams.stages = [options.value[0]['key']];
	}
}

// 设置watch - 包含其他初始化逻辑
watch(() => queryParams.stages, async (newVal, oldVal) => {
	// 只有当newVal有值且不同于oldVal时才执行
	if (!newVal || newVal.length === 0) return;

		// 配置项数组：统一管理需要加载的选项
		const configs = [
			{
				api: getComboboxByStageId,
				optionsRef: gradeOptions,
				paramKey: 'grades',
				valueKey: 'key'
			},
			{
				api: getSeriesComboboxByStage,
				optionsRef: versionOptions,
				paramKey: 'seriesNos',
				valueKey: 'key'
			},
			{
				api: getSemesterCombobox,
				optionsRef: volumeOptions,
				paramKey: 'semesters',
				valueKey: 'key'
			},
			{
				api: getSeriesTree,
				optionsRef: seriesOptions,
				paramKey: 'series',
				valueKey: 'subject'
			}
		];

		// 循环处理每个配置项
		for (const config of configs) {
			// 调用对应的API获取数据
			const res = await config.api(newVal);
			config.optionsRef.value = res.data;

			// 设置默认选中值
			if (config.optionsRef.value.length > 0) {
				const value = config.optionsRef.value[0][config.valueKey];
				// 处理数组和非数组的情况
				queryParams[config.paramKey] = Array.isArray(queryParams[config.paramKey])
					? [value]
					: value;
			}
		}

		await queryBookList();

}, { immediate: true });

onMounted(async ()=>{
	await initData();
})
</script>
<style lang="scss">
.book {
	.book-content {
		width: 100%;
		margin: 6px 0;
		padding: 10px;
		background: #fbfbfb;
		overflow: hidden;  // 替代float+clear

		// 左侧导航
		.sidebar {
			.tree-container{
				width: 25%;
				float: left;
				border-right: 1px solid #eee;
				padding: 20px;
				height: 300px;
				overflow-y: scroll;
			}

			// 右侧内容
			.content-wrap {
				width: 75%;
				float: left;
				padding: 0 20px;
				height: 320px;

				.filter-bar {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20px;

					.all-tab {
						font-size: 16px;
						color: #007bff;
						border-bottom: 2px solid #007bff;
						padding-bottom: 5px;
					}

					.sort-select {
						padding: 5px 8px;
						border: 1px solid #ddd;
						border-radius: 4px;
					}
				}
			}
			.book-info {
				margin-bottom: 20px;
				cursor: pointer;
				display: flex;
				align-items: center;
				img {
					width: 60px;
					height: 80px;
					margin-right: 10px;
				}
				.book-text p {
					font-size: 16px;
					color: #333;
				}
				.book-text h3 {
					font-size: 16px;
					margin-bottom: 5px;
				}
			}

		}

	}
}
</style>
